<template>
	<view class="grace-padding">
		
		<view >
		 
		  <view class="grace-h4 grace-blod">
			  [{{databaseCnData}}] {{titleData}}
		  </view>
		   
		  <view class="grace-text" style="margin-top:5upx;">
			<text>
				{{summaryData}}
			</text>
		  </view>
		  
		  <view class="detail-text">
		  	<block v-for="(item,index) in entityData" :key="index" >
				<text class="detail-field">
					{{item.name}}：
				</text>
				<text class="field-text">
					{{item.value}}
				</text>
				<view>
				</view>
			</block>
			
		  </view>
		  
		  <view class="detail-button">
			  <button class="mini-btn" type="primary" @click="collect()" size="mini">收藏</button>
			  <button class="mini-btn" type="primary" @click="goWebview()" size="mini">阅读</button>
			  <button class="mini-btn" type="primary" size="mini" @click="downPdf()">下载</button>
			  <button class="mini-btn" type="primary" @click="actionSheetTap()" size="mini">分享</button>
			  <button class="mini-btn" type="primary" size="mini" >邮箱</button>
		  </view>
			 
		</view>
		
		<!-- <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
			<view v-for="(tab, index) in tabs" :key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" :id="'tabTag-'+index" :data-cateid="tab.key" @tap="tabChange">{{tab.value}}</view>
		</scroll-view> -->
		
			<!-- 循环内容 
			<view v-for="(item, index) in newsAll" :key="index" @click="goDetail(item.type,item.id,item.title)" 
			class="grace-news-list" style="padding:5upx 25upx; width:700upx; ">
				<view class="grace-news-list-items">
					<view class="grace-news-list-title">
						<view class="grace-news-list-title-main">{{index+1}}. {{item.title}}</view>
						<text class="grace-news-list-title-desc grace-text-overflow">作者: {{item.author}}</text>
						<text class="grace-news-list-title-desc grace-text-overflow">日期: {{item.creattime}}</text>
					</view>
				</view>
			</view>
			-->
		<!-- <view style="text-align:center;margin-top:5px;" v-show="dataShow">数据为空</view>	 -->
		<view class="grace-title" style="margin-top:60upx;">
			<view class="grace-h5 grace-blod">网友评论</view>
		</view>
		<!-- 评论区 start -->
		<view class="grace-comment">
			<view class="" v-for="(value,key) in commentList" :key="key">
				<view class="grace-comment-list">
					<view class="grace-comment-face">
						<image :src="(value.memberAvatarImg==null||value.memberAvatarImg=='')?'../../../static/user.png':serverUrl+value.memberAvatarImg" mode="widthFix"></image>
					</view>
					<view class="grace-comment-body">
						<view class="grace-comment-top">
							<text>{{value.memberName}}</text>
							<text class="grace-iconfont icon-zan"></text>
						</view>
						<view class="grace-comment-date">
							<text>{{value.createTime}}</text>
							<text>{{value.likeCount}}</text>
						</view>
						<view class="grace-comment-content">{{value.content}}</view>
					</view>
				</view>
			</view>


		</view>
		<!-- 评论区 end -->
		<view class="grace-more-bottom">
			<block v-if="showMore">
				<navigator :url="'../comments/comments?id=' + id" class="grace-border">查看全部评论 <text class="grace-iconfont icon-arrow-right"></text></navigator>
			</block>
			<block v-if="commentList.length<1">暂无评论,快来抢沙发吧</block>
		</view>
		<view style="height:100upx;"></view>
		<!-- 评论输入框 -->
		<view class="grace-footer">
			<view class="grace-input">
				<view class="grace-input-icon grace-iconfont icon-write"></view>
				<input type="text" maxlength="150" :value="inputValue" @input="getInput" placeholder="写评论"></input>
			</view>
			<view class="grace-items" style="padding:0 20upx;" @click="saveMyResourceComment">发布</view>
		</view>		
	</view>
	
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';
var _self;
//对应下面3个标签的新闻内容数据
import graceLoading from "../../../graceUI/components/graceLoading.vue"
export default {
	computed: {
		...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid', 'databaseInfo'])
	},	
	data() {
		return {
			serverUrl: this.serverUrl,
			tabCurrentIndex: 0,
			tabHeight : 150,
			tabs: [],
			newsAll: [],
			entityData:[],
			id: "",
			type: "",
			title: "",
			author: "",
			cover: "",
			create_time_str: "",
			showFields:[],
			propertyData:[],
			titleData:"",
			databaseCnData:"",
			pdfURL: "",
			summaryData:"",
			dataShow: false,
			//
			inputValue: "",
			commentList: [],
			showMore: false,
		}
	},
	onLoad:function(e){
		_self = this;
		let obj = JSON.parse(decodeURIComponent(e.obj));
		this.id = obj.id;
		this.type = obj.type;
		this.title = obj.title;
		this.author = obj.author;
		this.create_time_str = obj.create_time_str;
		this.cover = obj.cover;
		this.getDataProperty();
		this.findDatabase();
		this.getMyResourceComment(obj.id);
	},
	onReady: function () {
		//获取屏幕高度及比例
		var winInfo = uni.getSystemInfo({
			success: function (res) {
				var windowHeight = res.windowHeight;
				//获取头部标题高度
				var dom = uni.createSelectorQuery().select('#grace-tab-title')
				dom.fields({size: true}, res2 => {
					if(!res2){return ;}
					//计算得出滚动区域的高度
					_self.tabHeight = windowHeight - res2.height;
				}).exec();
			}
		});
	},
	methods:{
		...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
		goWebview()  {
			uni.navigateTo({
				url: "/pages/general/webview/webview",
			})
		},
			getMyResourceComment(id) {
				var data = {
					resourceId: id,
					pageNumber: 1,
					pageSize: 5,
				};
				uni.request({
					url: this.serverUrl + 'user-api/getMyResourceComment',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r.data.data);
						if (r.data.code == '000000') {
							var len = r.data.data.length;
							if (len > 4) {
								len = 4;
								this.showMore = true;
							}
							for (var i = 0; i < len; i++) {
								var tmpObj = {
									id: r.data.data[i].id,
									resourceId: r.data.data[i].resourceId,
									memberAvatarImg: r.data.data[i].memberAvatarImg,
									content: r.data.data[i].content,
									createTime: r.data.data[i].createTime,
									memberName: r.data.data[i].memberName,
									likeCount: r.data.data[i].likeCount
								};
								this.commentList.push(tmpObj);
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getInput: function(e) {
				this.inputValue = e.target.value;
			},
			saveMyResourceComment() {
				if (this.hasLogin) {
					if (this.inputValue.length > 1) {
						var data = {
							resourceId: this.id,
							username: this.userInfo.username,
							content: this.inputValue,
						};
						uni.request({
							url: this.serverUrl + 'user-api/saveMyResourceComment',
							header: {
								"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
							},
							data: data,
							method: "POST",
							success: (r) => {
								console.log(r);
								if (r.data.code == '000000') {
									uni.showToast({
										title: '发布成功'
									});
									this.inputValue = "";
									this.commentList = [];
									this.getMyResourceComment(this.id);
								} else {
									uni.showToast({
										title: r.data.message
									});
								}
							},
							fail: (data, code) => {
								console.log('fail' + JSON.stringify(data));
							}
						})
					} else {
						uni.showToast({
							title: "请输入评论内容",
							icon: "none"
						});
					}
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/news/detail/detail&id=" + this.id
					})
				}
			},					
		collect(){
			let shareObj = {
				id: this.id,
				title: this.title,
				type: this.type,
				cover: this.cover,
				author: this.author,
				create_time_str: this.create_time_str
			}			
			if (this.hasLogin) {
				uni.request({
					url: this.serverUrl + 'user-api/saveMyCollect',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						"username": this.userInfo.username,
						"resourceType": this.type,
						"author": this.author,
						"title": this.title,
						"resourceId": this.id
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							uni.showToast({
								title: "收藏成功",
								icon: "none"
							})
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			} else {
				uni.navigateTo({
					url: "/pages/general/login/login?url=/pages/my/collect/collect"
				})
			}				

		},
		downPdf(){
			if(this.pdfURL!=null&&this.pdfURL!=""){
				uni.downloadFile({
					url: this.serverUrl+this.pdfURL,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveFile({
							  tempFilePath: res.tempFilePath,
							  success: function (r) {
								var savedFilePath = r.savedFilePath;
								uni.showModal({
									title:"下载成功",
									content: "文件保存路径："+savedFilePath,
									showCancel: false
								})
								
							  }
							});			
						}
					}
				});
			}else{
				uni.showToast({
					title:"暂无文件",
					icon:"none"
				})
			}	
		},
		actionSheetTap() {
			//#ifdef MP-WEIXIN
				this.goShare();
				return;
			// #endif
			uni.showActionSheet({
				itemList: ['微信聊天界面', '微信朋友圈', 'QQ', '新浪微博', '圈子'],
				success: (e) => {
					if(e.tapIndex==0){
						this.moreShare("weixin","WXSceneSession");
					}else if(e.tapIndex==1){
						this.moreShare("weixin","WXSenceTimeline");
					}else if(e.tapIndex==2){
						this.moreShare("qq","");
					}else if(e.tapIndex==3){
						this.moreShare("sinaweibo","");
					}else if(e.tapIndex==4){
						this.goShare();
					}
				}
			})
		},
		moreShare(provider,scene){
			uni.share({
				provider: provider,
				scene: scene,
				type: 0,
				href: this.serverUrl+"/web/details.html?id="+this.id+"&type="+this.type,
				title: this.title,
				summary: "作者："+this.author,
				imageUrl: this.cover,
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});			
		},
		goShare(){
			let shareObj = {
				id: this.id,
				title: this.title,
				type: this.type,
				cover: this.cover,
				author: this.author,
				create_time_str: this.create_time_str
			}			
			if (this.hasLogin) {
				uni.navigateTo({
					url:'/pages/social/submit/submit?shareObj=' + encodeURIComponent(JSON.stringify(shareObj))
				})
			} else {
				uni.navigateTo({
					url: '/pages/general/login/login?url=/pages/social/submit/submit&shareObj=' + encodeURIComponent(JSON.stringify(shareObj))
				})
			}	
		},
		goDetail(type,id,title) {
			let obj = {
				id: id,
				type: type,
				title: title
			}
			if(type=='xwzx') {
				uni.navigateTo({
					url: "/pages/news/detail/detail?id=" + id
				})
			}else {
				uni.navigateTo({
					url: "/pages/search/detail/detail?obj=" + encodeURIComponent(JSON.stringify(obj))
				})
			}
			
		},
		getDetail()  {
			var data = {
				id: this.id,
				showFields: this.showFields + "database_cn",
				username: this.userInfo.username
			};
			uni.request({
				url: this.serverUrl + 'search-api/find',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					//console.log(r);
					if (r.data.code == '000000') {
						// console.log(r.data.data);
						
						let tempData = r.data.data.data[0];
						
						this.titleData = tempData.title;
						this.summaryData = tempData.summary;
						this.databaseCnData = tempData.database_cn;
						this.pdfURL = tempData.pdf;
						
						//循环属性二次封装
						for(var key in tempData ){
							if(key!='title' && key!='summary' && key!='database_cn' 
								&& key!='type' && key!='database_cn' && key!='pdf' && key!='cover') {
								// console.log(key);
								// console.log(tempData[key]);
								//判断是否有值，只展示有值的字段
								if(null!=tempData[key] && tempData[key].length>0) {
									let fieldLabel = '';
									for (var i = 0; i < this.propertyData.length; i++) {
										if(key==this.propertyData[i].key) {
											fieldLabel = this.propertyData[i].value;
										}
									}
									var tmpObj = {
										name: fieldLabel,
										value: tempData[key]
									};
									this.entityData.push(tmpObj);
								}
								//
							}
							
						}
						
					} else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		// 查询字段
		getDataProperty() {
			var data = {
				databaseEn: this.type,
				webDetailShow: "1",
				pageNumber: 1,
				pageSize: 50
			};
			uni.request({
				url: this.serverUrl + 'search-api/getDataProperty',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					// console.log(r);
					if(r.data.code=='000000') {
						for (var i = 0; i < r.data.data.length; i++) {
							var tmpObj = {
								key: r.data.data[i].nameEn,
								value: r.data.data[i].nameCn
							};
							this.propertyData.push(tmpObj);
							this.showFields+=r.data.data[i].nameEn+";";
						}
						// console.log(this.propertyData);
						// console.log(this.showFields);
						this.getDetail();
					}else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		//查询资源库详情，返回推荐资源库列表
		findDatabase() {
			var data = {
				databaseEn: this.type
			};
			uni.request({
				url: this.serverUrl + 'search-api/findDatabase',
				header: {
				"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					//console.log(r);
					if(r.data.code=='000000') {
						var rec = r.data.data.recommendNameEn.split(';');
						// this.searchResource(rec[0]);
						var tmp = {};
						for(var i=0;i<rec.length;i++){
							for(var j=0;j<this.databaseInfo.length;j++){
								if(rec[i]==this.databaseInfo[j].key){
									tmp={
										key:rec[i],
										value:this.databaseInfo[j].value
									}
									break;
								}
							}
							this.tabs.push(tmp);
						}
					}else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		//根据资源类型查询数据（top5）
		searchResource(type) {
			console.log(type);
			var data = {
				// query: "$type:" + type + " AND $title:" + this.title,
				query: "$type:" + type,
				showFields: "id;title;author;create_time_str",
				pageNum: 1,
				pageSize: 5
			};
			uni.request({
				url: this.serverUrl + 'search-api/search',
				header: {
				"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					//console.log(r);
					if(r.data.code=='000000') {
						if (r.data.data.data.length < 1) {
							this.dataShow = true;
						}else{
							this.dataShow = false;
						}
						var tmp = {};
						for(var i=0;i<r.data.data.data.length;i++){
							tmp={
								id: r.data.data.data[i].id[0],
								title: r.data.data.data[i].title[0],
								author: r.data.data.data[i].author==null?"":r.data.data.data[i].author[0],
								creattime: r.data.data.data[i].create_time_str[0],
								type:type
							}
							this.newsAll.push(tmp);
						}
						
					}else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},
		tabChange: function (e) {
			var index = e.target.id.replace('tabTag-', '');
			this.tabCurrentIndex = index;
			var cateid = e.currentTarget.dataset.cateid;
			this.newsAll = [];
			this.searchResource(cateid);
		}
		
	},
	components:{
		graceLoading
	}
}
</script>

<style>
.grace-tab-current {
	border-bottom:4rpx solid #417dc9 !important;
	color: #417dc9;
}
.grace-tab-title view {
	padding:0 6px;
	margin:0 18px;
	line-height:35px;
}
.grace-news-list-title-main {
	font-size: 30upx;
}
.detail-text {
	background: #F6F7F8;
	width: 95%;
	margin-top: 15upx;
	padding: 15upx;
}
.detail-text > block {
	display:block;
	width:100%;
	padding:5rpx 0;
	margin:5rpx 0;
}

.detail-field {
	width: 150upx;
}
.detail-button {
	margin-top: 35upx;
	display: flex;
	align-items:center;
}

.grace-news-list-title-desc {
	margin-top: 5upx;
}

button[type=primary] {
	background:#417dc9;
	width: 60upx;
	font-size: 28upx;
	box-sizing:inherit;
}

</style>
